import { defineComponent, reactive, ref, computed } from "vue";
import LForm, { LFormItem } from "@/components/public/lForm/lForm";
import styles from "./voucher.module.less";
import { message } from "ant-design-vue";
import LPopup from "@/components/public/lPopup/lPopup";
import { useStore as useUserStore } from "@/store/user";
import {
  $groupOrderPayVerifyPay,
  $groupOrderPayDetail,
} from "@/api/groupOrder/groupOrder";
export default defineComponent({
  emits: ["cancel", "confirm"],
  setup(props, { emit, expose }) {
    const userStore = useUserStore();
    const state = reactive({
      status: "",
      pay_time: "",
      form: {
        payment_voucher: "",
        identification:"",
        idcard_of_legal_person:"",
        application_form:"",
        status: "",
        pay_time: "",
        remark: "",
        order_no: "",
      },
      rules: {
        voucherlist: [{ required: true, message: "请上传凭证" }],
      },
    } as any);
    const cancelHandler = () => {
      addPopupRef.value.close();
    };
    const confirmHandler = () => {
      $groupOrderPayVerifyPay(state.form).then((res: any) => {
        message.success("凭证确认提交成功");
        emit("confirm");
        addPopupRef.value.close();
      });
    };
    const addPopupRef = ref(null as any);
    const open = (e: any, status: any) => {
      state.status = status;
      state.form.remark = "";
      if (e) {
        state.form.order_no = e;
      }
      if (status == 10 || status == 11) {
        $groupOrderPayDetail({ order_no: e }).then((res: any) => {
          state.form.payment_voucher = res?.data?.payment_voucher;
          state.form.identification = res?.data?.identification || "";
          state.form.idcard_of_legal_person = res?.data?.idcard_of_legal_person || "";
          state.form.application_form = res?.data?.application_form || "";
          state.pay_time = res?.data?.pay_time;
        });
      }
      addPopupRef.value.open();
    };
    const close = () => {
      addPopupRef.value.close();
    };
    expose({
      open,
      close,
    });
    const LookVoucher = () => (
      <LForm v-model={state.form}>
        <LFormItem label="上传缴费凭证" prop="">
          <a-image width={100} src={state.form.payment_voucher} />
        </LFormItem>
        {/* <LFormItem label="证件照" prop="">
          <a-image width={100} src={state.form.identification}/>
        </LFormItem>
        <LFormItem label="法人身份证" prop="">
          <a-image width={100} src={state.form.idcard_of_legal_person} />
        </LFormItem>
        <LFormItem label="投保单" prop="">
          <a-image width={100}src={state.form.application_form} />
        </LFormItem> */}
        {state.status == 10 && (
          <>
            <LFormItem label="缴费时间" prop="">
              <a-date-picker
                onChange={(e: any, string: any) => {
                  state.form.pay_time = string;
                }}
              />
            </LFormItem>
            <LFormItem label="审核备注" prop="">
              <a-textarea
                v-model:value={state.form.remark}
                placeholder="请输入审核备注"
              ></a-textarea>
            </LFormItem>
          </>
        )}
        {state.status == 11 && (
          <>
            <LFormItem label="缴费时间" prop="">
              <div>{state.pay_time}</div>
            </LFormItem>
          </>
        )}
      </LForm>
    );
    const Components = () => (
      <LPopup title={state.status == 10 ? "缴费凭证":"查看凭证"} ref={addPopupRef}>
        <div class={styles.voucherBox}>
          <div>
            {(state.status == 10 || state.status == 11) && <LookVoucher />}
            <div class={styles.buttonBox}>
              {state.status == 10 && (
                <>
                  <div class={styles.button_left_box}>
                    <a-button
                      type="primary"
                      size="small"
                      danger
                      onClick={() => {
                        state.form.status = -1;
                        confirmHandler();
                      }}
                    >
                      确认失败
                    </a-button>
                  </div>
                  <a-button
                    type="primary"
                    size="small"
                    onClick={() => {
                      state.form.status = 1;
                      confirmHandler();
                    }}
                  >
                    确认成功
                  </a-button>
                </>
              )}
              {
                 state.status == 11 && (
                   <>
                      <a-button
                      size="small"
                      onClick={() => {
                        cancelHandler();
                      }}
                    >
                      返回
                    </a-button>
                   </>
                 )
              }
            </div>
          </div>
        </div>
      </LPopup>
    );
    return {
      Components,
    };
  },
  render() {
    return <this.Components />;
  },
});
